<template>
  <div id="index">
    <el-container :style="containerStyle">
      <el-header height="80px">
        <Header></Header>
      </el-header>
      <el-container>
        <el-aside width="170px">
          <!--        前台导航 start-->
          <FrontNav v-if="!this.$store.state.isBack"></FrontNav>
          <!--        前台导航 end-->
          <!--        后台导航 start-->
          <Backnav v-if="this.$store.state.isBack"></Backnav>
          <!--        后台导航 end-->
            <div style="margin-top: 40px" v-if="true">
            <h4>身份选择(仅供调试)</h4>
            <el-radio-group v-model="radio" @change="changeRoll">
            <el-radio label="服务员">前台服务员</el-radio><br>
            <el-radio label="领班">前台领班</el-radio><br>
            <el-radio label="主管">后台主管</el-radio><br>
            <el-radio label="会计">后台会计</el-radio><br>
            <el-radio label="经理">后台经理</el-radio><br>
          </el-radio-group>
          </div>
        </el-aside>
        <el-main>
          <div :style="mainStyle">
            <router-view v-if="ifRouterViewShow"></router-view>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
  import Backnav from '../components/common/Backnav';
  import FrontNav from '../components/common/FrontNav';
  import Header from '../components/common/Header.vue'

  export default {
    name: "Index",
    components: {
      Backnav,
      FrontNav,
      Header
    },
    data () {
      return {
        ifRouterViewShow:true,
        containerStyle: { height: '' },
        mainStyle: { height: '', overflow: 'auto'},
        radio:sessionStorage.getItem('jobName')||undefined,
      }
    },
    provide() {
      return {
        reload: this.reload
      }
    },
    methods:{
      reload(){
        console.log('页面reload()')
        this.ifRouterViewShow = false
        this.$nextTick(() => {
          this.ifRouterViewShow = true
        })
    
      },
      changeRoll(value){
        sessionStorage.setItem('jobName',value)
        this.$store.state.jobName=value;
        this.$router.push('/index')
      }
    },
    created() {
      this.containerStyle.height = window.innerHeight + 'px'
      this.mainStyle.height = (window.innerHeight-120) + 'px'
    }
  }
</script>

<style lang="less" scoped>
  #index {
    height: 100%;
    .el-header {
      border-bottom: 10px solid white;
      box-sizing: border-box;
      padding: 0px;
    }
    .el-aside {
      color: #333;
      text-align: center;
      #loginInfo {
        /*background-color: red;*/
        height: 120px;
        width: 100%;
        box-sizing: border-box;
        border: 1px solid white;
      }
    }
    .el-main {
      background-color: rgba(255, 255, 255, 0.1);
      border-left: 10px solid white;
    }
  }
</style>
